---
title: Badges
description: Responsive badge and tag components for Tailwind CSS v4. These customizable UI elements include base badges, icon badges, dismissible badges, and themed variations—ideal for notifications, statuses, and labels in web applications and dashboards. Optimized for SEO and accessibility.
category: application
emoji: 🥁
slug: badges
wrapper: h-[200px]
terms:
  - alert
  - status
components:
  - { title: 'Base', dark: true }
  - { title: 'Base with icon', dark: true }
  - { title: 'Base with dismiss', dark: true }
  - { title: 'Icon', dark: true }
  - { title: 'Themed with icon', dark: true }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Badge Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
